ScooterModal.tsx ➔ ScooterModal - Code Metrics - Inspection of "Id 13" - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — dev (#7)

by Oscar

created 2023-01-03 09:34 UTC

ScooterModal.tsx ➔ ScooterModal C

↳ Parent: components/ScooterModal.tsx

Complexity

Conditions

Size

Total Lines	87
Code Lines	71

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	71
dl	0
loc	87
rs	6.549
c	0
b	0
f	0
cc	7

How to fix Long Method

import { stopLocationUpdatesAsync } from "expo-location";
import React from "react";
import { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar, Modal } from "react-native";
import mapModel from "../models/map";
import GestureRecognizer from 'react-native-swipe-gestures';

export default function ScooterModal({navigation, scooter, modalVisible, setModalVisible, currentCity}) {
    const [scooterName, setScooterName] = useState(null);
    const [scooterId, setScooterId] = useState(null);
    const [battery, setBattery] = useState(null);
    const [fixedRate, setFixedRate] = useState(null);
    const [timeRate, setTimeRate] = useState(null);


    const batteryImages = {
        '100': require('../assets/battery_100.png'),
        '75': require('../assets/battery_75.png'),
        '50': require('../assets/battery_50.png'),
        '25': require('../assets/battery_25.png')
    }

    function getBattery(batteryPercentage) {
        if (batteryPercentage >= 75) {
            return '100'
        } else if (batteryPercentage >= 50) {
            return '75'
        } else if (batteryPercentage >= 25) {
            return '50'
        } else {
            return '25'
        }
    };

    useEffect(() => {
        function getScooterInfo(): void {            
            if (scooter) {
                const title = scooter['name'].split('#');
                setScooterName(title[0]);
                setScooterId(title[1]);
                setBattery(getBattery(scooter['battery']));

                setFixedRate(currentCity['taxRates']['fixedRate']);
                setTimeRate(currentCity['taxRates']['timeRate']);
                // console.log(currentCity['taxRates']);
                
            }
        }
        getScooterInfo();
    });


    // console.log(scooter);
    
    return (
        <GestureRecognizer
            style={{flex: 1}}
            onSwipeDown={ () => setModalVisible(false) }
        >
        <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
            setModalVisible(!modalVisible)
        }}

        >
            <View style={styles.modalContainer}></View>


            <View style={styles.modalMessage}>
            <View style={styles.swipeButton}></View>

                <View style={styles.titleContainer}>
                    <Image style={styles.scooterImage} source={require('../assets/scooter2.png')}></Image>

                    <View style={styles.textContainer}>
                        <Text style={styles.scooterTitle}> {scooterName} {scooterId}</Text>
                        <Image style={styles.battery} source={batteryImages[`${battery}`]}></Image>
                    </View>

                </View>
 
                <Pressable style={styles.tourButton} >
                    <Text style={{color: 'white'}}>Start tour</Text>
                </Pressable>

                <Text style={{color: 'grey'}}> {fixedRate} kr unlocking + {timeRate} kr / min. </Text>
                
            </View>
        </Modal>
    </GestureRecognizer>
    )
}

const styles = StyleSheet.create({
    modalContainer: {
        // backgroundColor: 'rgba(80, 80, 80, 0.6)',
        width: '100%',
        height: '100%',
        flex: 1,
    },

    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
        marginTop: 30
    },

    swipeButton: {
        width: '25%',
        height: 5,
        backgroundColor: 'lightgrey',
        borderRadius: 25
    },

    textContainer: {
        width: '45%',
        marginBottom: 10,
        // padding: 0
        // alignItems: 'center'
        // flexDirection: 'row'
    },

    modalMessage: {
        backgroundColor: 'white',
        width: '100%',
        height: '30%',
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingTop: 10
        // flexDirection: 'row'
        // borderRadius: 25
    },

    scooterTitle: {
        fontWeight: 'bold',
        marginBottom: 10,
        fontSize: 16
    },
    
    battery: {
        marginLeft: 5,
        // width: 15,
        // height: 28
    },

    scooterImage: {
        margin: 10
    },

    tourButton: {
        backgroundColor: 'cornflowerblue',
        width: '80%',
        height: 50,
        borderRadius: 10,
        // display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 10
        // marginTop: 120,
    },
})

1			import { stopLocationUpdatesAsync } from "expo-location";
2			import React from "react";
3			import { useState, useEffect } from 'react';
4			import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar, Modal } from "react-native";
5			import mapModel from "../models/map";
6			import GestureRecognizer from 'react-native-swipe-gestures';
7
8			export default function ScooterModal({navigation, scooter, modalVisible, setModalVisible, currentCity}) {
9			const [scooterName, setScooterName] = useState(null);
10			const [scooterId, setScooterId] = useState(null);
11			const [battery, setBattery] = useState(null);
12			const [fixedRate, setFixedRate] = useState(null);
13			const [timeRate, setTimeRate] = useState(null);
14
15
16			const batteryImages = {
17			'100': require('../assets/battery_100.png'),
18			'75': require('../assets/battery_75.png'),
19			'50': require('../assets/battery_50.png'),
20			'25': require('../assets/battery_25.png')
21			}
22
23			function getBattery(batteryPercentage) {
24			if (batteryPercentage >= 75) {
25			return '100'
26			} else if (batteryPercentage >= 50) {
27			return '75'
28			} else if (batteryPercentage >= 25) {
29			return '50'
30			} else {
31			return '25'
32			}
33			};
34
35			useEffect(() => {
36			function getScooterInfo(): void {
37			if (scooter) {
38			const title = scooter['name'].split('#');
39			setScooterName(title[0]);
40			setScooterId(title[1]);
41			setBattery(getBattery(scooter['battery']));
42
43			setFixedRate(currentCity['taxRates']['fixedRate']);
44			setTimeRate(currentCity['taxRates']['timeRate']);
45			// console.log(currentCity['taxRates']);
46
47			}
48			}
49			getScooterInfo();
50			});
51
52
53			// console.log(scooter);
54
55			return (
56			<GestureRecognizer
57			style={{flex: 1}}
58			onSwipeDown={ () => setModalVisible(false) }
59			>
60			<Modal
61			animationType="slide"
62			transparent={true}
63			visible={modalVisible}
64			onRequestClose={() => {
65			setModalVisible(!modalVisible)
66			}}
67
68			>
69			<View style={styles.modalContainer}></View>
70
71
72			<View style={styles.modalMessage}>
73			<View style={styles.swipeButton}></View>
74
75			<View style={styles.titleContainer}>
76			<Image style={styles.scooterImage} source={require('../assets/scooter2.png')}></Image>
77
78			<View style={styles.textContainer}>
79			<Text style={styles.scooterTitle}> {scooterName} {scooterId}</Text>
80			<Image style={styles.battery} source={batteryImages[`${battery}`]}></Image>
81			</View>
82
83			</View>
84
85			<Pressable style={styles.tourButton} >
86			<Text style={{color: 'white'}}>Start tour</Text>
87			</Pressable>
88
89			<Text style={{color: 'grey'}}> {fixedRate} kr unlocking + {timeRate} kr / min. </Text>
90
91			</View>
92			</Modal>
93			</GestureRecognizer>
94			)
95			}
96
97			const styles = StyleSheet.create({
98			modalContainer: {
99			// backgroundColor: 'rgba(80, 80, 80, 0.6)',
100			width: '100%',
101			height: '100%',
102			flex: 1,
103			},
104
105			titleContainer: {
106			flexDirection: 'row',
107			alignItems: 'center',
108			marginBottom: 10,
109			marginTop: 30
110			},
111
112			swipeButton: {
113			width: '25%',
114			height: 5,
115			backgroundColor: 'lightgrey',
116			borderRadius: 25
117			},
118
119			textContainer: {
120			width: '45%',
121			marginBottom: 10,
122			// padding: 0
123			// alignItems: 'center'
124			// flexDirection: 'row'
125			},
126
127			modalMessage: {
128			backgroundColor: 'white',
129			width: '100%',
130			height: '30%',
131			justifyContent: 'flex-start',
132			alignItems: 'center',
133			paddingTop: 10
134			// flexDirection: 'row'
135			// borderRadius: 25
136			},
137
138			scooterTitle: {
139			fontWeight: 'bold',
140			marginBottom: 10,
141			fontSize: 16
142			},
143
144			battery: {
145			marginLeft: 5,
146			// width: 15,
147			// height: 28
148			},
149
150			scooterImage: {
151			margin: 10
152			},
153
154			tourButton: {
155			backgroundColor: 'cornflowerblue',
156			width: '80%',
157			height: 50,
158			borderRadius: 10,
159			// display: 'flex',
160			justifyContent: 'center',
161			alignItems: 'center',
162			marginBottom: 10
163			// marginTop: 120,
164			},
165			})

FalkenDev / SparkRentals-Mobile-App

Pull Request — dev (#7)

ScooterModal.tsx ➔ ScooterModal C

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like